<!-- 人员选择 -->
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import type { PropType } from 'vue'
import type { IMyPick, IMyTableColumn, IMyTable, IMySearchConfig } from '@/types/global'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  multiple: {
    type: Boolean,
    default: true
  },
  pickList: {
    type: Array as PropType<IMyPick[]>,
    default() {
      return [] as IMyPick[]
    }
  },
  /**
   * 其他el-dialog的属性
   */
  options: {
    type: Object,
    default() {
      return {
        width: '70%',
        top: '5vh',
        draggable: true
      }
    }
  }
})

// 表格数据
const tableData = reactive<IMyTable>({
  search: {
    pageNum: 1,
    pageSize: 20,
    groupId: '',
    searchKey: ''
  },
  data: [] as any[],
  total: 0,
  columns: [
    { type: 'tableSelect', prop: '', width: '60px', multiple: true },
    { label: '姓名', prop: 'userName' },
    { label: '所属部门', prop: 'groupName' }
  ] as IMyTableColumn[]
})
// 搜索数据
const searchConfig = computed(() => {
  const config: IMySearchConfig[] = [
    { label: '部门', prop: 'groupId', type: 'tree', list: treeList.value },
    { label: '姓名', prop: 'searchKey', type: 'input' }
  ]
  return config
})
// 树数据
const treeList = ref<any[]>([])

getDataList(true)
getDepList()

/**
 * 获取表格数据
 */
function getDataList(isRefresh: boolean = false) {
  if (isRefresh === true) {
    tableData.search!.pageNum = 1
  }
  // getPersonListPageByDep(tableData.search).then((res) => {
  //   if (res.success) {
  //     tableData.data = res.data.rows.map((item: any) => {
  //       return { ...item, id: item.userId, name: item.userName }
  //     })
  //     tableData.total = res.data.total
  //   }
  // })
}
/**
 * 获取部门树数据
 */
function getDepList() {
  // getDepTree().then((res) => {
  //   if (res.success) {
  //     // 扁平数据转树数据
  //     treeList.value = []
  //     const resTree = res.data.data.map((item: any) => {
  //       const params = {
  //         id: item.id,
  //         parentId: item.parentId,
  //         children: [],
  //         label: item.name,
  //         value: item.id
  //       }
  //       return params
  //     })
  //     for (let item1 of resTree) {
  //       if (item1.parentId == 0) {
  //         treeList.value.push(item1)
  //         continue
  //       }
  //       for (let item2 of resTree) {
  //         if (item1.parentId == item2.id) {
  //           item2.children.push(item1)
  //           break
  //         }
  //       }
  //     }
  //   }
  // })
}
/**
 * 确定选择
 */
function pickConfirmEvt(list: IMyPick[]) {
  props.pickList.splice(0)
  list.forEach((item) => {
    props.pickList.push(item)
  })
}
</script>

<template>
  <DbPicker
    v-bind="tableData"
    :title="title"
    :multiple="multiple"
    :default-list="pickList"
    @search="getDataList"
    @pick="pickConfirmEvt"
  >
    <template #search>
      <DuiSearch :search="tableData.search" :config="searchConfig" @search="getDataList" />
    </template>
    <slot></slot>
  </DbPicker>
</template>
